<template>
	<uni-view data-v-3e7bf6ca="" class="cu-card dynamic">
		<uni-view data-v-3e7bf6ca="" class="cu-item shadow">
			<uni-view data-v-3e7bf6ca="" class="cu-list menu-avatar">
				<uni-view data-v-3e7bf6ca="" class="cu-item">
					<uni-view data-v-3e7bf6ca="" class="cu-avatar round lg"
						style="background-image: url(&quot;https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg&quot;);">
					</uni-view>
					<uni-view data-v-3e7bf6ca="" class="content flex-sub">
						<uni-view data-v-3e7bf6ca="">凯尔</uni-view>
						<uni-view data-v-3e7bf6ca="" class="text-gray text-sm flex justify-between">2019年12月3日
						</uni-view>
					</uni-view>
				</uni-view>
			</uni-view>
			<uni-view data-v-3e7bf6ca="" class="text-content">折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！</uni-view>
			<uni-view data-v-3e7bf6ca="" class="grid flex-sub padding-lr col-1">
				<uni-view data-v-3e7bf6ca="" 
					>
					<video :src="videoAddress" controls></video>
				</uni-view>
			</uni-view>
			<uni-view data-v-3e7bf6ca="" class="text-gray text-sm text-right padding">
				<uni-text data-v-3e7bf6ca="" class="cuIcon-attentionfill margin-lr-xs" @click="cVideoCollect" ><span></span></uni-text>{{collect}}
				<uni-text data-v-3e7bf6ca="" class="cuIcon-appreciatefill margin-lr-xs" @click="praiseVideo"><span></span></uni-text>{{praise}}
				<uni-text data-v-3e7bf6ca="" class="cuIcon-messagefill margin-lr-xs" @click="evaluateVideo"><span></span></uni-text>评论
				<uni-text data-v-3e7bf6ca="" class="cuIcon-questionfill margin-lr-xs" @click="insertComplaint"><span></span></uni-text>投诉
				<uni-text data-v-3e7bf6ca="" class="cuIcon-cartfill margin-lr-xs" ><span></span></uni-text>{{isPay}}
			</uni-view>
			
			<uni-view data-v-3e7bf6ca="" class="cu-list menu-avatar comment solids-top" v-for="item,index in evaluateList">
				<uni-view data-v-3e7bf6ca="" class="cu-item">
					<uni-view data-v-3e7bf6ca="" class="cu-avatar round"
						style="background-image: url(&quot;https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png&quot;);">
					</uni-view>
					<uni-view data-v-3e7bf6ca="" class="content">
						<uni-view data-v-3e7bf6ca="" class="text-grey">{{item.userId}}</uni-view>
						<uni-view data-v-3e7bf6ca="" class="text-gray text-content text-df">{{item.evaluateContent}}</uni-view>
						<uni-view data-v-3e7bf6ca="" class="bg-grey padding-sm radius margin-top-sm  text-sm">
						</uni-view>
						<uni-view data-v-3e7bf6ca="" class="text-gray text-df">{{item.create_time}}</uni-view>
						<!-- <uni-view data-v-3e7bf6ca="" class="margin-top-sm flex justify-between">
							
							<uni-view data-v-3e7bf6ca="" class="text-gray text-df">{{item.create_time}}</uni-view>
							<uni-view data-v-3e7bf6ca="">
								<uni-text data-v-3e7bf6ca="" class="cuIcon-appreciatefill text-red"><span></span>
								</uni-text>
								<uni-text data-v-3e7bf6ca="" class="cuIcon-messagefill text-gray margin-left-sm">
									<span></span></uni-text>
							</uni-view>
						</uni-view> -->
					</uni-view>
				</uni-view>
				<!-- <uni-view data-v-3e7bf6ca="" class="cu-item">
					<uni-view data-v-3e7bf6ca="" class="cu-avatar round"
						style="background-image: url(&quot;https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg&quot;);">
					</uni-view>
					<uni-view data-v-3e7bf6ca="" class="content">
						<uni-view data-v-3e7bf6ca="" class="text-grey">凯尔</uni-view>
						<uni-view data-v-3e7bf6ca="" class="text-gray text-content text-df">妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
						</uni-view>
						<uni-view data-v-3e7bf6ca="" class="bg-grey padding-sm radius margin-top-sm  text-sm">
							<uni-view data-v-3e7bf6ca="" class="flex">
								<uni-view data-v-3e7bf6ca="">莫甘娜：</uni-view>
								<uni-view data-v-3e7bf6ca="" class="flex-sub">如果不能立足于大地，要这双脚又有何用?</uni-view>
							</uni-view>
						</uni-view>
						<uni-view data-v-3e7bf6ca="" class="margin-top-sm flex justify-between">
							<uni-view data-v-3e7bf6ca="" class="text-gray text-df">2018年12月4日</uni-view>
							<uni-view data-v-3e7bf6ca="">
								<uni-text data-v-3e7bf6ca="" class="cuIcon-appreciate text-gray"><span></span>
								</uni-text>
								<uni-text data-v-3e7bf6ca="" class="cuIcon-messagefill text-gray margin-left-sm">
									<span></span></uni-text>
							</uni-view>
						</uni-view>
					</uni-view>
				</uni-view> -->
			</uni-view>
		</uni-view>
		
		
		<view :hidden="userFeedbackHidden" class="popup_content">
					<view class="popup_title">文明发言</view>
					<view class="popup_textarea_item">
						<textarea class="popup_textarea" @blur="content">
						</textarea>
						<view>
							<button class="popup_button" @click="inputEvaluate">提交评论</button>
						</view>
					</view>
				</view>
				<view class="popup_overlay" :hidden="userFeedbackHidden"></view>
				
				<view :hidden="feedbackHidden" class="popup_content">
							<view class="popup_title">理性投诉</view>
							<view class="popup_textarea_item">
								<textarea class="popup_textarea" @blur="content">
								</textarea>
								<view>
									<button class="popup_button" @click="inputComplaint">提交投诉</button>
								</view>
							</view>
						</view>
						<view class="popup_overlay" :hidden="feedbackHidden"></view>
	</uni-view>
	
	

	
</template>

<script>
	export default{
		onLoad(option) {
			this.videoAddress=option.videoAddress,
			this.videoId=option.videoId,
			this.$req.selectVideoCollect(option.videoId).then(res=>{
				if(res.data==="已收藏"){
					this.collect='已收藏'
				}else{
					this.collect='收藏'
				}
			}),
			//查询视频评论
			this.$req.selectEvaluateVideo(option.videoId).then(res=>{
				console.log(option.videoId)
				console.log(res)
				this.evaluateList=res.data.list
				
			}),
			//查询视频关联产品是否被购买
			this.$req.isPurchase(option.goodsId,0,2).then(res=>{
				if(res.data){
					this.isPay='已购买'
				}
				console.log(res)
			})
			
		},
		
		
		
		data(){
			return{
				videoAddress:'',
				isPay:'未购买',
				collect:'收藏',
				videoId:'',
				praise:'点赞',
				evaluateList:[
					
				],
				userFeedbackHidden: true, // 默认隐藏
				feedbackContent: '', // 用户反馈内容
				feedbackHidden: true
			}
		},
		methods:{
			cVideoCollect(){
				this.$req.videoCollect(this.videoId).then(res=>{
					if(res.msg==="收藏成功"){
						this.collect='已收藏'
					}else{
						this.collect='收藏'
					}
					console.log(res)
				})
			},
			content(e){
				this.feedbackContent = e.detail.value
			},
			praiseVideo(){
				this.$req.praiseVideo(this.videoId).then(res=>{
					console.log(res)
					if(res.msg==="点赞成功"){
						this.praise='已点赞'
					}else{
						this.praise='点赞'
					}
					console.log(res)
				})
			},
			// 点击评论弹出文本域
			evaluateVideo(){
				this.userFeedbackHidden = false;
			},
			// 点击提交 上传评论
			inputEvaluate(){
				this.userFeedbackHidden = true
				this.$req.evaluateVideo(this.videoId,this.feedbackContent).then(res=>{
					console.log(res)
				})
			},
			//// 点击投诉弹出文本域
			insertComplaint(){
				if(this.isPay==='已购买'){
					this.feedbackHidden=false;
				}
				
			},
			
			// 点击提交 上传投诉
			inputComplaint(){
				this.feedbackHidden = true
				this.$req.insertComplaint(this.videoId,this.feedbackContent).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style>
	
	.popup_overlay {
	 
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: .80;
			filter: alpha(opacity=88);
		}
	 
		.popup_content {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 520upx;
			height: 550upx;
			margin-left: -270upx;
			margin-top: -270upx;
			border: 10px solid white;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20upx;
		}
	 
		.popup_title {
			padding-top: 20upx;
			width: 480upx;
			text-align: center;
			font-size: 32upx;
		}
	 
		.popup_textarea_item {
			padding-top: 5upx;
			height: 240upx;
			width: 440upx;
			background-color: #F1F1F1;
			margin-top: 30upx;
			margin-left: 20upx;
		}
	 
		.popup_textarea {
			width: 410upx;
			font-size: 26upx;
			margin-left: 20upx;
		}
	 
		.popup_button {
			color: white;
			background-color: #4399FC;
			border-radius: 20upx;
		}
	
	
</style>
